<template>
	<view>
		
		<view class="data-contanier bg-white">
		
			<view class="flex align-center justify-between padding-sm">
				<!-- <text>更新于{{ yesterdayDate }}（昨日）</text> -->
				<view class="flex">
					<button type="primary"  size="mini">实时</button>
					<button type="default" class="margin-left-sm" size="mini">昨日</button>
					<button type="default" class="margin-left-sm" size="mini">7日</button>
					<button type="default" class="margin-left-sm" size="mini">30日</button>
				</view>
			</view>
			
			<view class="flex align-center justify-around">
				<view class="">成交金额</view>
				<view class="">提现金额</view>
			</view>
			
			<!-- <view class="swiper-type">
				<swiper display-multiple-items=4>
					<swiper-item>
						<view class="swiper-item bg-blue">成交金额</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">提现金额</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">成交订单数</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">退款单数</view>
					</swiper-item>
				</swiper>
			</view> -->
			
			<view class="padding-sm">
				<view class="charts-box">
				  <qiun-data-charts type="line" :chartData="chartData" />
				</view>
			</view>
			
			
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yesterdayDate: this.getYesterdayDate(),
				chartData: {},
				
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			//获取昨日日期
			 getYesterdayDate() {
				const today = new Date();
				const yesterday = new Date(today);
				yesterday.setDate(yesterday.getDate() - 1);
				const year = yesterday.getFullYear();
				const month = ('0' + (yesterday.getMonth() + 1)).slice(-2); // 月份是从0开始的
				const day = ('0' + yesterday.getDate()).slice(-2);
				return `${month}-${day}`;
			},
			
			//获取图表数据
			getServerData() {
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["08/06","08/07","08/08","08/09","08/10","08/11","08/12"],
					series: [
					 //  {
						// name: "目标值",
						// data: [35,36,31,33,13,34,11]
					 //  },
					  {
						name: "成交金额",
						data: [0,0,0,0,0,0,0]
					  }
					]
				  };
				this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			
				
		}
	}
</script>

<style scoped>
.swiper-type{
	height: 100rpx;
	border-top: 1rpx solid #f9f9f9;
	border-bottom: 1rpx solid #f9f9f9;
}
.swiper-type swiper-item{
	height: 100rpx;
	line-height: 100rpx;
	border-right: 1rpx solid #f9f9f9;
	text-align: center;
	
}
</style>
